<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
	#forClone{
		display:none;
	}
	#thClone{
		display:none;
	}
</style>
</head>
<body>
	<form action="addCustomer" method="post" id="formId">
		姓名:<input type="text" name="cname"><br>
		性别:<input type="radio" name="sex" checked="checked" value="true">男
		<input type="radio" name="sex" value="false">女<br>
		工资:<input type="number" name="sal"><br>
		生日<input type="date" name="birth"><br>
	</form>
	<button id="submit" >异步提交</button>
	<br>
	<br>
	<br>
	<br>
	<p>Ajax生成</p>
	<table border=1 id="tableId">
	</table>
	<table>
		<tr id="thClone">
			<td class="tid">ID</td>
			<th class="tname">NAME</th>
			<th class="tsex">SEX</th>
			<th clas="tsal">SAL</th>
			<th class="tbirth">BIRTH</th>
			<th>删除</th>
			<th>更新</th>
		</tr>
		<tr id="forClone">
			<td class="id">id</td>
			<td class="name">cname</td>
			<td class="sex">sex</td>
			<td class="sal">sal</td>
			<td class="birth">birth</td>
			<td class="delete"><button class="btn btn-danger">del</button></td>
			<td class="update"><button class="btn btn-primary">update</button></td>
		</tr>
	</table>
	
	
	<!-- 模态框（Modal） -->  
<div class="modal fade" id="showFrame" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  
    <div class="modal-dialog">  
        <div class="modal-content">  
            <div class="modal-header">  
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>  
                <h4 class="modal-title" id="myModalLabel">修改信息</h4>  
            </div>  
            <div class="modal-body">
            	<form id="modelFormId">  
            	ID:<input type="text" id="modelid" name="id" readonly="true"><br>
		                   姓名:<input type="text" id="modelname" name="name"><br>
				性别:<input type="radio" id="modelsex" name="sex" checked="checked" value="true">男
				<input type="radio" id="modelsex" name="sex" value="false">女<br>
				工资:<input type="number" id="modelsal" name="sal"><br>
				生日<input type="date" id="modelbirth" name="birth"><br>
				</form>
            </div>  
            <div class="modal-footer">  
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>  
                <button type="button" class="btn btn-primary" id="finalUpdate">提交更改</button>  
            </div>  
        </div>  
        <!-- /.modal-content -->  
    </div>  
    <!-- /.modal -->  
</div>  
	
	
	<script type="text/javascript">
		$(function(){
			$("#submit").on("click",function(){					
				var d={};
				$("#formId").find('input').each(function(){d[this.name]=this.value})
				$.ajax({
					type:"POST",
					url:"addCustomerByAjax",
					data:JSON.stringify(d),
					contentType:"application/json",
					dataType:"json"	
				})
				.done(function(customers){
					render(customers);
				});
			})
            function render(customers){
            	$("#tableId").empty();
                var table = $("#tableId");   
              	$("#thClone").clone(true)
              	.css("display","block")
              	.find(".tid").text("ID").end()
              	.find(".tname").text("NAME").end()
              	.find(".tname").text("NAME").end()
              	.find(".tsex").text("SEX").end()
              	.find(".tsal").text("SAL").end()
              	.find(".tbirth").text("BIRTH").end()
              	.appendTo(table);
                for(var i = 0;i<customers.length;i++){
                 	var name = customers[i].cname;
                 	var switchSex = customers[i].sex=="true"?"male":"female";
                    $("#forClone").clone(true)
                    .css("display","block")
                    .find(".id").text(customers[i].id).end()
                    .find(".name").text(customers[i].cname).end()
                    .find(".sex").text(switchSex).end()
                    .find(".sal").text(customers[i].sal).end()
                    .find(".birth").text(formatDateTime(customers[i].birth)).end()
                    .appendTo(table);
                }
            }
            $(".delete").on("click",function(){
            	var tt = $(this).parent().find("td:first-child").text();
            	var customer = {id:tt};
            	$.ajax({
					type:"POST",
					url:"delete",
					data:JSON.stringify(customer),
					contentType:"application/json",
					dataType:"json"	
				})
				.done(function(customers){
					render(customers);
				});
            })
            
             $(".update").on("click",function(){
            	var tr = $(this).parent();
            	var tt = tr.find("td:first-child").text();
            	var name= tr.find("td:nth(1)").text()
            	var customer = {id:tt};
            	$.ajax({
					type:"POST",
					url:"find",
					data:JSON.stringify(customer),
					contentType:"application/json",
					dataType:"json"	
				})
				.done(function(customer){
					$("#modelid").attr("value",customer.id);
					$("#modelname").attr("value",customer.cname);
					$("#modelsex").attr("value",customer.sex);
					$("#modelsal").attr("value",customer.sal);
					$("#modelbirth").attr("value",formatDateTime(customer.birth));
					$("#showFrame").modal("show");
				});
            })
            function formatDateTime(inputTime) {    
                var date = new Date(inputTime);  
                var y = date.getFullYear();    
                var m = date.getMonth() + 1;    
                m = m < 10 ? ('0' + m) : m;    
                var d = date.getDate();    
                d = d < 10 ? ('0' + d) : d;     
                return y + '-' + m + '-' + d;    
            };
            $("#finalUpdate").on("click",function(){
            	var modalForm={};
				$("#modelFormId").find('input').each(function(){modalForm[this.name]=this.value})
				$.ajax({
					type:"POST",
					url:"update",
					data:JSON.stringify(modalForm),
					contentType:"application/json",
					dataType:"json"	
				})
				.done(function(customers){
					$("#showFrame").modal("hide");
					render(customers);
				});
            	
            })

		})
	</script>
</body>
</html>